<template>
  <div id="change-login-password-captcha-view" class="stepper">
    <!-- <div class="back">
            <md-icon name="snyc_nav_fh" @click="goBack"></md-icon>
    </div>-->
    <div class="upper">
      <div class="title">输入验证码</div>
    </div>
    <div class="desc">
      6位数字验证码已经发送至
      <a>{{this.currentPhone}}</a>
    </div>
    <div class="captcha-input-box">
      <captcha-box ref="captchaBox" v-model="captcha" :maxlength="6" autofocus @submit="onCaptchaSubmit" />
    </div>
    <div class="captcha-status">
      <div v-if="sent">
        <a>{{countdownTimer}}秒</a>后重新获取验证码
      </div>
      <div v-if="!sent" class="row">
        <a @click="getCaptcha('1')">重新发送验证码</a>
        <a class="ml-2" @click="getCaptcha('2')">语音验证</a>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/snyc_nav_fh.svg';
import '@/assets/svgs/tishi.svg';
import { Toast, Icon, Dialog } from 'mand-mobile';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Wx from '@/common/weixinUtils';
import CaptchaBox from '@/components/CaptchaBox';
export default {
  name: 'captcha-view',
  components: {
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [CaptchaBox.name]: CaptchaBox
  },
  data() {
    return {
      currentPhone: '',
      captcha: '',
      sent: false,
      countdownInstance: null,
      countdownTimer: 59
    };
  },
  created() {
    if (this.$route.query.newphone) {
      this.currentPhone = this.$route.query.newphone;
    }
  },
  mounted() {
    this.$refs.captchaBox.focus();
    this.startCountdown();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    onCaptchaSubmit() {
      var data = {
        user_phone: encryptByDESModeEBC(this.currentPhone),
        mobileCode: this.captcha
      };
      Loading.show();
      http.post('/pakj/passenger/changeUserPhone', data).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          Dialog.alert({
            icon: 'tishi',
            title: '更换成功',
            content: '手机号已更换成功，之后请使用更换的手机号登录',
            confirmText: '确定',
            onConfirm: () => {
              if (Utils.isApp()) {
                // 判断当前环境是否在app
                /* eslint-disable */
                var os = Utils.getOSName();
                if ((os === 'Linux' || os === 'Android') && handler) {
                  handler.pageLogin();
                } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
                  window.webkit.messageHandlers.pageLogin.postMessage(JSON.stringify(''));
                }
              } else {
                if (Utils.isMiniProgram()) {
                  // 小程序
                  Wx.restartMiniProgram();
                } else {
                  let q = {
                    action: 'reg'
                  };
                  if (this.getOpenId) {
                    q.oid = this.getOpenId;
                  }
                  if (this.getUnionId) {
                    q.uid = this.getUnionId;
                  }
                  this.$router.replace({
                    name: 'Login',
                    query: q
                  });
                }
                localStorage.clear();
                sessionStorage.clear();
                this.$store.commit('resetUser');
              }
            }
          });
        } else {
          Toast({
            content: res.data.msg,
            duration: 3000,
            hasMask: true
          });
          this.$refs.captchaBox.reset();
          this.$refs.captchaBox.focus();
        }
      });
    },
    getCaptcha(type = '1') {
      let params = {
        type: '5',
        user_phone: this.currentPhone,
        code_type: type
      };
      if (this.currentPhone && this.currentPhone !== '') {
        this.$store.dispatch('getCaptchNew', params).then(result => {
          this.$refs.captchaBox.focus();
          this.startCountdown();
        });
      } else {
        let self = this;
        Dialog.alert({
          title: 'ERROR',
          content: 'PHONE NUMBER REQUIRED',
          onConfirm: () => {
            self.$router.go(-1);
          }
        });
      }
    },
    startCountdown() {
      this.sent = true;
      this.countdownInstance = setInterval(() => {
        this.countdownTimer--;
        if (this.countdownTimer <= 0) {
          this.sent = false;
          clearInterval(this.countdownInstance);
          this.countdownInstance = null;
          this.countdownTimer = 59;
        }
      }, 1000);
    }
  },
  computed: {
    ...mapGetters(['currentUser', 'getOpenId', 'getUnionId'])
  }
};
</script>
<style lang="stylus">
#change-login-password-captcha-view {
  padding: 40px;

  a {
    color: color-primary;
  }

  .upper {
    margin-top: 62px;
  }

  .desc {
    margin-bottom: 80px !important;
  }

  .captcha-input-box {
    .md-codebox {
      justify-content: flex-start;
    }
  }

  .captcha-status {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 500;
    color: #999999;
    line-height: 24px;
  }
}
</style>